<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>考勤系统后台</title>

<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />

<link
	href="${pageContext.request.contextPath }/dist/css/bootstrap.min.css"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath }/dist/css/bootstrap-responsive.min.css"
	rel="stylesheet" />

<link
	href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath }/dist/css/font-awesome.css"
	rel="stylesheet" />

<link href="${pageContext.request.contextPath }/dist/css/adminia.css"
	rel="stylesheet" />
<link
	href="${pageContext.request.contextPath }/dist/css/adminia-responsive.css"
	rel="stylesheet" />

<link
	href="${pageContext.request.contextPath }/dist/css/pages/dashboard.css"
	rel="stylesheet" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

	<div class="navbar navbar-fixed-top">

		<div class="navbar-inner">

			<div class="container">

				<a class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse"> <span class="icon-bar"></span> <span
					class="icon-bar"></span> <span class="icon-bar"></span>
				</a> <a class="brand">考勤系统</a>

				<div class="nav-collapse">

					<ul class="nav pull-right">
						<li><a href="#"><span class="badge badge-warning">7</span></a>
						</li>

						<li class="divider-vertical"></li>

						<li class="dropdown"><a data-toggle="dropdown"
							class="dropdown-toggle " href="">
								${sessionScope.admin.adminName} <b class="caret"></b>
						</a>

							<ul class="dropdown-menu">
								<li><a href=""><i class="icon-user"></i>
										账户设置 </a></li>

								<li><a href="" data-toggle="modal"
									data-target="#change_admin_pwd"><i class="icon-lock"></i>
										修改密码</a></li>

								<li class="divider"></li>

								<li><a
									href="${pageContext.request.contextPath }/AdminController?op=adminQuit"><i
										class="icon-off"></i>退出</a></li>
							</ul></li>
					</ul>

				</div>

			</div>

		</div>

	</div>




	<div id="content">

		<div class="container">

			<div class="row">

				<div class="span3">

					<div class="account-container">

						<div class="account-avatar">
							<c:if test="${sessionScope.admin.adminAvatarAddr != null }">
									<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=${sessionScope.admin.adminAvatarAddr}" alt="" class="thumbnail" id="adImg" ></a>
								</c:if>
								<c:if test="${sessionScope.admin.adminAvatarAddr == null }">
										<a  data-toggle="modal" data-target="#updPic"><img src="${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName=labi.jpg" alt="" class="thumbnail" id="adImg"  ></a>
								</c:if>
						</div>
						<!-- /account-avatar -->
						<div class="account-details">

							<span class="account-name">${sessionScope.admin.adminName}</span>
							<span class="account-role">${sessionScope.admin.adminId}号管理员</span>

							<span class="account-actions"> <a href="javascript:;">个人资料</a>
								| <a href="javascript:;">账户管理</a>
							</span>

						</div>
						<!-- /account-details -->

					</div>
					<!-- /account-container -->

					<hr />

					<ul id="main-nav" class="nav nav-tabs nav-stacked">

						<li><a
							href="${pageContext.request.contextPath }/Admin/Index.jsp"> <i
								class="icon-home"></i> 回主页
						</a></li>

						<li class="active"><a
							href="${pageContext.request.contextPath }/Admin/leaveApproval.jsp">
								<i class="icon-th-list"></i> 请假审批
						</a></li>

						<li><a
							href="${pageContext.request.contextPath }/Admin/kaoqgl.jsp">
								<i class="icon-signal"></i> 考勤管理
						</a></li>

						<li><a
							href="${pageContext.request.contextPath }/Admin/yuanggl.jsp">
								<i class="icon-user"></i> 员工管理
						</a></li>

						<li><a
							href="${pageContext.request.contextPath }/Admin/regAdmin.jsp">
								<i class="icon-user"></i> 账户管理
						</a></li>

					</ul>

					<hr />

					<div class="sidebar-extra">
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
							sed do eiusmod tempor incididunt ut labore et dolore magna
							aliqua. Ut enim ad minim veniam, quis nostrud.</p>
					</div>
					<!-- .sidebar-extra -->

					<br />

				</div>
				<!-- /span3 -->



				<div class="span9">

					<h1 class="page-title">
						<i class="icon-home"></i> 请假审批
					</h1>

					<!-- 部门记录 -->
					<div class="widget widget-table" id="depts">
						<div class="widget-header">
							<i class="icon-th-list"></i>
							<h3>部门</h3>
						</div>
						<div class="widget-content">
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th>部门编号</th>
										<th>部门名称</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="deptListBody">

								</tbody>
							</table>
						</div>
						<!-- /widget-content -->
					</div>
					
					<!-- 部门内请假记录 -->
					<div class="widget widget-table" id="leaves" style="display:none">
						<div class="widget-header">
							<i class="icon-th-list"></i>
							<h3>请假申请</h3>
							<button type="button" id="returnDepts" class="btn btn-primary pull-right " style="margin-top:7px">返回部门列表</button>
						</div>
						<div class="widget-content">
							<table class="table table-striped table-bordered">
								<thead>
									<tr>
										<th>请假申请编号</th>
										<th>员工姓名</th>
										<th>请假原因</th>
										<th>起始时间</th>
										<th>结束时间</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="leaveListBody">

								</tbody>
							</table>
						</div>
						<!-- /widget-content -->
					</div>
					<!-- /widget -->


					<div class="row">

						<div class="span5">

							<div class="widget">

								<div class="widget-header">
									<h3>三大纪律</h3>
								</div>
								<!-- /widget-header -->

								<div class="widget-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing
										elit, sed do eiusmod tempor incididunt ut labore et dolore
										magna aliqua. Ut enim ad minim veniam, quis nostrud
										exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate
										velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
										sint occaecat cupidatat non proident, sunt in culpa qui
										officia deserunt mollit anim id est laborum.</p>
								</div>
								<!-- /widget-content -->

							</div>
							<!-- /widget -->

						</div>
						<!-- /span5 -->

						<div class="span4">

							<div class="widget">

								<div class="widget-header">
									<h3>八项注意</h3>
								</div>
								<!-- /widget-header -->

								<div class="widget-content">
									<p>Lorem ipsum dolor sit amet, consectetur adipisicing
										elit, sed do eiusmod tempor incididunt ut labore et dolore
										magna aliqua. Ut enim ad minim veniam, quis nostrud
										exercitation ullamco laboris nisi ut aliquip ex ea commodo
										consequat. Duis aute irure dolor in reprehenderit in voluptate
										velit esse cillum dolore eu fugiat nulla pariatur.</p>
								</div>
								<!-- /widget-content -->

							</div>
							<!-- /widget -->
						</div>
						<!-- /span4 -->

					</div>
					<!-- /row -->

				</div>
				<!-- /span9 -->


			</div>
			<!-- /row -->

		</div>
		<!-- /container -->

	</div>
	<!-- /content -->


	<div id="footer">

		<div class="container">
			<hr />
			<p>&copy; 2012 Go Ideate.</p>
		</div>
		<!-- /container -->

	</div>
	<!-- /footer -->

	<!-- 修改密码的模态框 -->
	<div class="modal fade" id="change_admin_pwd" tabindex="-1"
		role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<form class="form-horizontal" role="form">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">修改密码</h4>
					</div>
					<div class="modal-body">

						<div class="form-group">
							<label for="previousPwd" class="col-sm-2 control-label">原密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="previousPwd"
									name="previousPwd" />
							</div>
						</div>
						<!-- <div class="form-group">
							<label for="previousRePwd" class="col-sm-2 control-label">再次输入</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="previousRePwd"
									name="previousRePwd" />
							</div>
						</div> -->
						<div class="form-group">
							<label for="newPwd" class="col-sm-2 control-label">新密码</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newPwd"
									name="newPwd" />
							</div>
						</div>

						<div class="form-group">
							<label for="newRePwd" class="col-sm-2 control-label">确认输入</label>
							<div class="col-sm-8">
								<input type="password" class="form-control" id="newRePwd"
									name="newRePwd" />
							</div>
						</div>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭
						</button>
						<button type="button" class="btn btn-primary" id="updateBtn">提交更改</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</form>
		</div>
		<!-- /.modal -->
	</div>
	<div id="dId" style="display:none"></div>
	
	<!-- 修改头像模态框 -->
    <div class="modal fade" id="updPic">
		<div class="modal-dialog">
			<div class="modal-content" >
				<!-- 模态框头部 -->
				<div class="modal-header">
					<h4 class="modal-title">修改头像</h4>
					<button type="button" class="close" data-dismiss="modal">&times;</button>
				</div>
			 <form id="updatePicForm" enctype="multipart/form-data" method="post">
				<!-- 模态框主体 -->
				<div class="modal-body">
				<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png" name="ep" />
				</div>
			</form>
			
				<!-- 模态框底部 -->
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-success" id="btup">确认修改</button>
				</div>
				
			
			</div>
		</div>
	</div>
	
	<%-- 	<script src="${pageContext.request.contextPath }/dist/js/jquery-3.3.1.min.js"></script>
		<script src="${pageContext.request.contextPath }/dist/js/bootstrap.js"></script>
	<script src="${pageContext.request.contextPath }/dist/js/excanvas.min.js"></script>
	<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.js"></script>
	<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.pie.js"></script>
	<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.orderBars.js"></script>
	<script src="${pageContext.request.contextPath }/dist/js/jquery.flot.resize.js"></script>
	
	<script src="${pageContext.request.contextPath }/dist/js/charts/bar.js"></script>  --%>
	
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 

	<script type="text/javascript">

	function showDeptData(result){
		//1.每一次遍历之前需要清空
		$("#deptListBody").empty();
		//2.显示文章列表数据
		$.each(result,function(index,dept){
			//先把tr标签复制到后端的字符串中,自动转义,复制到text中替换${    与  }
			$("#deptListBody").append('<tr>'+
		  	         '<td>'+dept.deptId+'</td>'+
			         '<td>'+dept.deptName+'</td>'+
			         '<td><a data-deptid="'+dept.deptId+'"'+
			         'data-deptname="'+dept.deptName+'"'+
			         	 'class="enterDept">'+
			            '<button class="btn btn-success">进入部门</button></a></td>'+
			       '</tr>')
		});
	}

	function showLeaveData(datas){		
		//1.每一次遍历之前需要清空
		$("#leaveListBody").empty();
		var  html=null;
		$.each(datas,function(index,leave){
			var result=(leave.result)*1;
			if(result==0){		
				html='<td><a data-approvalid="'+leave.approvalId+'" class="agree">'+
	            '<button class="btn btn-success" style="font-size: 14px;">批准</button></a>'+
	            '<a data-approvalid="'+leave.approvalId+'" class="refuse"><button class="btn btn-danger" style="font-size: 14px;">拒批</button></a></td>'	;            
			}
			if(result==1){
				html='<td>已批准</td>';	            
			}
			if(result==2){
				html='<td>已拒绝</td>';
			}
			$("#leaveListBody").append('<tr>'+
		  	         '<td>'+leave.approvalId+'</td>'+
			         '<td>'+leave.emp.empName+'</td>'+
			         '<td>'+leave.leaveReasons+'</td>'+
			         '<td>'+leave.leaveTime+'</td>'+
			         '<td>'+leave.backTime+'</td>'+html+
			         '</tr>')
		});
	}

$(function(){
	$("#btup").click(function(){
		var formData = new FormData($("#updatePicForm")[0]);
		$.ajax({
			async : true,
			url : "${pageContext.request.contextPath}/AdminController?op=updatePic",
			type : "POST",
			data : formData,
			contentType : false,
			processData : false,
			success : function(admin) {
				var path = admin.adminAvatarAddr;
				$("#updPic").modal('hide');
				$("#adImg").attr("src","${pageContext.request.contextPath}/EmployeesController?op=getPic&fileName="+path+"&a=" + new Date().getTime());
			},
			error : function() {
				alert("异步请求失败");
			}
		})
	})
	//赋值动作,各种监听事件
	//界面一进来就需要发送ajax请求文章列表
	$.post("${pageContext.request.contextPath}/LeaveController",{op:"queryDept"},function(result){
		//显示数据写成一个方法,以后就不用在做拼接
		showDeptData(result);
	},"json")
	
	//进入部门点击事件
	$(document).on("click",".enterDept",function(){
		$("#depts").css("display","none");
		$("#leaves").css("display","block");
		$("#dId").text($(this).data("deptid"));
		$.post("${pageContext.request.contextPath}/LeaveController",{op:"queryLeave",deptId:$(this).data("deptid")},function(datas){
			showLeaveData(datas);
		},"json")
	})
	
	//返回部门事件
	$("#returnDepts").click(function(){
		$("#leaves").css("display","none");
		$("#depts").css("display","block");
		$.post("${pageContext.request.contextPath}/LeaveController",{op:"queryDept"},function(result){
			//显示数据写成一个方法,以后就不用在做拼接
			showDeptData(result);
		},"json")
	})
	
	//批准点击事件
	$(document).on("click",".agree",function(){
		$.post("${pageContext.request.contextPath}/LeaveController",{op:"agreeLeave",approvalId:$(this).data("approvalid"),deptId:$("#dId").text()},function(datas){
			showLeaveData(datas);
		},"json")
	})
	
	//拒批点击事件
	$(document).on("click",".refuse",function(){
		$.post("${pageContext.request.contextPath}/LeaveController",{op:"refuseLeave",approvalId:$(this).data("approvalid"),deptId:$("#dId").text()},function(datas){
			showLeaveData(datas);
		},"json")
	})
	
	//修改密码jq
		$("#updateBtn").click(function(){
			var	previousPwd=$("#previousPwd").val();
			var	previousRePwd=$("#previousRePwd").val();
			var	newPwd=$("#newPwd").val();
			var	newRePwd=$("#newRePwd").val();
			

		if(newPwd==newRePwd){
			//发送Ajax请求修改密码
			$.get("${pageContext.request.contextPath }/AdminController",{op:"change_admin_pwd",previousPwd:previousPwd,newPwd:newPwd,adminName:"${sessionScope.admin.adminName}"},function(flag){
				if(flag){
					//关闭模态框后并刷新数据
					$("#change_admin_pwd").modal('hide');
				}else{
					alert("账户密码错误,修改失败!")
				}
			},"json")
		}else{
			alert("两次密码不一致");
		}
		
		})
	})
</script>

</body>
</html>